<template>
  <div class="menu-nav">
    <div class="news">
      <div class="txt">今日头条</div>
      <div class="line"></div>
      <ul class="messages" :class="{'messages_top': roll}">
        <li v-for="(txt,i) in txts" :key="i">{{txt}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      txts: [
        "欢乐家大平台正式上线！",
        "百草味年货盛典 满188减100",
        "欢乐家平台保障"
      ],
      roll: false
    };
  },
  methods: {
    rollTop() {
      this.roll = true;
      setTimeout(() => {
        this.txts.push(this.txts[0]);
        this.txts.shift();
        this.roll = false;
      }, 700);
    }
  },
  mounted() {
    setInterval(this.rollTop, 2300);
  }
};
</script>

<style lang="scss">
.menu-nav {
  background: #fff;
  padding: 8px 0 10px 0;
  margin-top: 12px;
  .news {
    display: flex;
    height: 28px;
    padding: 0 16px;
    background: #f7f7f7;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    .txt {
      color: #ee4433;
      width: 60px;
      font-size: 14px;
    }
    .line {
      width: 1px;
      height: 18px;
      background: #e6e6e6;
      margin: 0 12px;
    }
    .messages {
      height: 28px;
      overflow: hidden;
      flex: 1;
      white-space: nowrap;
      list-style: none;
      font-size: 14px;
      li {
        line-height: 28px;
      }
    }

    .messages_top {
      transition: all 0.5s;
      margin-top: -50px;
    }
  }
}
</style>
